<template>
  <div class="main-content">
    <div class="screen-frame clearfix">

      <div class="col-md-6 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label for=""
                   class="col-md-3 col-sm-2 control-label">条件查询：</label>
            <div class="col-md-8 col-sm-10">
              <input type="text"
                     class="form-control"
                     placeholder="客户姓名/手机号码"
                     v-model="params.name">
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label for=""
                   class="col-md-3 col-sm-2 control-label">经纪公司：</label>
            <div class="col-md-8 col-sm-10">
              <Select v-model="params.companyId"
                      clearable
                      filterable
                      @on-change="partnerList(params.companyId)">
                <Option v-for="item in agentOrgArray"
                        v-model="item.agentCompany">{{ item.agentCompanyName }}</Option>
              </Select>
              <!-- <select class="form-control" v-model="params.companyId" @change="partnerList(params.companyId)">
							<option value="">全部</option>
							<option  v-for="(item,index,key) in agentOrgArray" v-bind:value="item.agentCompany" :key="key">{{item.agentCompanyName}}</option>
						</select> -->
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">申诉时间：</label>
            <div class="col-md-8 col-sm-10"
                 style="width:73%">
              <input type="date"
                     class="form-control"
                     style="width:45%;float:left"
                     v-model="params.appealTimeBefore" />
              <span style="float:left">-</span>
              <input type="date"
                     class="form-control"
                     style="width:45%;float:left"
                     v-model="params.appealTimeAfter" />
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label for=""
                   class="col-md-3 col-sm-2 control-label">经纪人：</label>
            <div class="col-md-8 col-sm-10">
              <Select v-model="params.agentId"
                      clearable
                      filterable>
                <Option v-for="item in partnerArray"
                        v-model="item.id">{{ item.accountName }}</Option>
              </Select>
              <button type="button"
                      v-on:click="list(1)"
                      class="btn screen-submit">查询</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table-responsive report-table">
      <table class="table table-striped table-bordered min-width-1118">
        <thead>
          <tr>
            <th width="10%">客户姓名</th>
            <th width="8%">手机号码</th>
            <th width="12%">意向楼盘</th>
            <th width="10%">经纪人</th>
            <th width="8%">经纪人电话</th>
            <th width="12%">经纪公司</th>
            <th width="10%">申诉时间</th>
            <th width="10%">申诉状态</th>
            <th width="10%">交易延长时间</th>
            <th width="10%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in customerPremisesList"
              :key="index">
            <td>{{row.name}}</td>
            <td>{{row.mobile}}</td>
            <td>{{row.premisesName}}</td>
            <td>{{row.clientSource}}</td>
            <td>{{row.staffPhone}}</td>
            <td>{{row.staffCompanyName}}</td>
            <td>{{row.createTime}}</td>
            <td><span class="stateOne">{{row.processStatusName}}</span></td>
            <td>{{row.visitProtectTime}}</td>
            <td>
              <a v-on:click="toDetail(row.id)"
                 class="btnA edit"
                 v-res="{code:'menu_0005_0002_0001'}">查看</a>
              <a v-on:click="openAppealDealModal(row)"
                 class="btnA edit"
                 v-res="{code:'menu_0005_0002_0002'}"
                 v-if="row.processStatus == 1 && row.customerStatus == 0 ">处理</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="laypage_cus_pre_appeal"></div>
    <Modal></Modal>
    <appealDealModal v-bind:appealDealInfoX="appealDealInfoX"
                     v-on:appealDealListener='appealDealReturn'></appealDealModal>
  </div>
</template>

<script>
import Modal from "../common/modal.vue";
import appealDealModal from "./appealDealModal.vue";
export default {
  data() {
    return {
      params: {
        pageSize: 10,
        pageNo: 1,
        userId: window.localStorage.getItem("userId"),
      },
      customerPremisesList: [],
      appealInfo: {
        cusPremisesId: "",
      },
      agentOrgArray: [],
      partnerArray: [],
      appealDealInfoX: {
        id: "",
        processStatus: "",
        remark: "",
      },
    };
  },
  components: {
    Modal,
    appealDealModal,
  },
  mounted: function () {
    this.list(0);
    this.agentOrgList();
  },
  methods: {
    list: function (type) {
      //加载数据
      var _self = this;
      //判断点查询按钮时，将当前页和条数设置为默认
      if (type == "1") {
        _self.params.pageNo = "1";
        _self.params.pageSize = "10";
      }
      var url = this.utilHelper.apiUrl + "/api/getCPAppealPage";
      var body = {};
      body.params = _self.params;
      _self.$http.post(url, body).then(
        (response) => {
          var res = response.body.resData;
          if (res.result == 1) {
            var total = res.cpPage.total;
            _self.customerPremisesList = res.cpPage.rows;
            for (var ii = 0; ii < _self.customerPremisesList.length; ii++) {
              var record = _self.customerPremisesList[ii];
              var commissionAmount = record.commissionAmount;
              var customerStatus = record.customerStatus;
              var commissionStatus = record.commissionStatus;
              var CommissionIsShow = record.commissionIsShow;
              //非缴定、已结佣状态的记录,佣金金额统一设置为待定
              if (
                (commissionAmount &&
                  (customerStatus == 5 || customerStatus == 7)) ||
                CommissionIsShow == "1"
              ) {
                record.commissionAmount = _self.changeToDecimal(
                  record.commissionAmount,
                  2
                );
                record.reward = _self.changeToDecimal(record.reward, 2);
              } else {
                record.commissionAmount = "待定";
              }
              if (
                commissionAmount &&
                (customerStatus == 5 ||
                  customerStatus == 6 ||
                  customerStatus == 7)
              ) {
                record.reward = _self.changeToDecimal(record.reward, 2);
              } else {
                record.reward = "0";
              }

              //非已结佣记录的发放状态统一设置为待发放
              var payStatus = "待发放";
              if (commissionStatus == 1) {
                payStatus = "已发放";
              }
              if (CommissionIsShow == 1) {
                payStatus = "";
              }
              record.payStatus = payStatus;
            }
            var current = res.cpPage.pageNumber;
            var totalPages = res.cpPage.totalPages;

            layui.laypage.render({
              elem: $("#laypage_cus_pre_appeal"), //容器。值支持id名、原生dom对象，jquery对象,
              limit: _self.params.pageSize,
              curr: current,
              count: total,
              theme: "#f87242;", //皮肤
              first: "首页", //若不显示，设置false即可
              last: "尾页", //若不显示，设置false即可
              prev: "上一页", //若不显示，设置false即可
              next: "下一页", //若不显示，设置false即可
              layout: ["prev", "page", "next", "skip", "count"],

              jump: function (obj, first) {
                if (!first) {
                  _self.params.pageNo = obj.curr;
                  _self.list(0);
                }
              },
            });
          } else {
            //layer.alert("系统异常!");
          }
        },
        (response) => {
          console.log(response);
        }
      );
    },
    reSubmit: function (cusPremisesId, premisesId) {
      var _self = this;
      var url =
        this.utilHelper.apiUrl + "/customerPremises/checkPremisesExist.do";
      _self.$http.post(url, { id: premisesId }).then(
        (response) => {
          if (response.body.result == "0") {
            layer.alert(response.body.msg);
          } else {
            this.appealInfo.cusPremisesId = cusPremisesId;
            $("#addAppealModal").modal("show");
          }
        },
        (response) => {
          //layer.alert("系统异常!");
        }
      );
    },
    toReport: function (cusPremisesId) {
      //重新报备 ，当状态为已过报备保护期  和 已过带看保护期时  可以执行操作
      this.appealInfo.cusPremisesId = cusPremisesId;
      $("#addReportModal").modal("show");
    },
    changeToDecimal(value, point) {
      var f_x = parseFloat(value);
      if (isNaN(f_x)) {
        value = "0";
      }
      var f_x = Math.round(value * 100) / 100;
      var s_x = f_x.toString();
      var pos_decimal = s_x.indexOf(".");
      if (pos_decimal < 0) {
        pos_decimal = s_x.length;
        s_x += ".";
      }
      while (s_x.length <= pos_decimal + point) {
        s_x += "0";
      }
      return s_x;
    },
    saveAppealReturn() {
      this.list();
    },
    agentOrgList: function () {
      const _self = this;
      const url = this.utilHelper.apiUrl + "/api/getAgentOrgByDevOrg";
      const body = { params: { devCompanyId: "" } };
      _self.$http.post(url, body).then(
        (response) => {
          const res = response.body.resData;
          if (res.result == "0") {
            layer.alert(res.errorMsg);
          } else {
            _self.agentOrgArray = res.agentOrgList;
          }
        },
        (response) => {
          //layer.alert("系统异常!");
        }
      );
    },
    partnerList: function (companyId) {
      const _self = this;
      const url = this.utilHelper.apiUrl + "/api/getPartnerByCompany";
      const body = { params: { companyId: companyId } };
      _self.$http.post(url, body).then(
        (response) => {
          const res = response.body.resData;
          if (res.result == "0") {
            layer.alert(res.errorMsg);
          } else {
            _self.partnerArray = res.partnerInfoList;
          }
        },
        (response) => {
          //layer.alert("系统异常!");
        }
      );
    },
    toDetail: function (cusPreId) {
      // 跳转报备详情,新打开一个而窗口
      let router = this.$router.resolve({
        path: "/cusPreDetail/" + cusPreId,
      });
      window.open(router.href, "_blank");
    },
    openAppealDealModal: function (obj) {
      this.appealDealInfoX.id = obj.id;
      $("#appealDealModal").modal("show");
    },
    appealDealReturn: function () {
      this.list(0);
    },
  },
};
</script>